import React from 'react'
import {useDispatch,useSelector} from "react-redux"
import {todoClear} from "../store/actions"
import classNames from "classnames"

import {filterActive} from "../store/actions"

export default function TodoFooter() {

  const dispatch = useDispatch();

  const {arr,active}=useSelector(state=>state.filters)//激活选中
  const lists=useSelector(state=>state.todo)//事件列表
  const leftLength=lists.filter(item=>!item.done).length//剩余完成数量
  const handleClear=()=>{
    dispatch(todoClear())
  }
  
  const handleActive=(active)=>{
      dispatch(filterActive(active))
  }
  return (
    <footer className="footer">
    <span className="todo-count"><strong>{leftLength}</strong> item left</span>
    <ul className="filters">
      {/* <li>
        <a className="selected" href="#/">All</a>
      </li>
      <li>
        <a href="#/active">Active</a>
      </li>
      <li>
        <a href="#/completed">Completed</a>
      </li> */}
    {arr.map(item=><li key={item} onClick={()=>{handleActive(item)}}>
        <a href="#/active"  className={classNames({selected:item===active})}>{item}</a>
      </li>)}

    </ul>
    {/* <!-- Hidden if no completed items are left ↓ --> */}
    <button className="clear-completed" onClick={()=>{handleClear()}}>Clear completed</button>
  </footer>
  )
}
